<template>
	<view class="bg-white padding-l-r-30">
		<view class="list-box align-items-center">
			<text>头像</text>
			<view class="flex-1">

			</view>
			<view class="avatar margin-r-20" @click="goCropper">
				<image :src="info.avatar" mode="widthFix"></image>
			</view>
			<u-icon name="arrow-right" color="#999" @click="goCropper"></u-icon>
		</view>
		<view class="line"></view>
		<view class="list-box align-items-center">
			<text>姓名</text>
			<view class="flex-1">

			</view>
			<view class="  margin-r-20" @click="">
				<input type="text" v-model="info.username">
			</view>
			<u-icon name="arrow-right" color="#999"></u-icon>
		</view>
		<view class="line"></view>
		<view class="list-box align-items-center">
			<text>性别</text>
			<view class="flex-1">

			</view>
			<view class="  margin-r-20" @click="sexShow = true">
				{{info.sex == 1 ?'男':'女'}}
			</view>
			<u-icon name="arrow-right" color="#999" @click="sexShow = true"></u-icon>
		</view>
		<view class="line"></view>
		<view class="list-box align-items-center">
			<text>生日</text>
			<view class="flex-1">

			</view>
			<view class="  margin-r-20" @click="birthdayShow=true">
				{{info.birthday}}
			</view>
			<u-icon name="arrow-right" color="#999" @click="birthdayShow=true"></u-icon>
		</view>
		<view class="line"></view>
		<view class="list-box align-items-center">
			<text>身份证号</text>
			<view class="flex-1">

			</view>
			<view class="  margin-r-20">
				{{info.id}}
			</view>
			<u-icon name="arrow-right" color="#999"></u-icon>
		</view>
		<view class="line"></view>
		<view class="list-box align-items-center">
			<text>手机号</text>
			<view class="flex-1">

			</view>
			<view class="margin-r-20" @click="goCropper">
				{{maskPhoneNumber(info.mobile)}}
			</view>
			<view class="modify" @click="modifyPhone">
				修改
			</view>
		</view>
		<view class="line"></view>
		<view class="btn-box border-radio-14" @click="onsubmit ">
			保存
		</view>
		<u-picker :show="sexShow" :columns="columns" @cancel='sexShow = false' @confirm='confirm'></u-picker>
		<u-datetime-picker :show="birthdayShow" v-model=" birthday" mode="date" :formatter="formatter"
			:minDate="-607524800000" @cancel='birthdayShow = false' @confirm="birthdayconfirm"></u-datetime-picker>
		<u-popup :show="show">
			<view style="width: 100%;height: 100vh;">
				<cropper selWidth="660rpx" selHeight="660rpx" @upload="myUpload" :avatarSrc="imgurl"
					avatarStyle="width:100vw;height:100vw;" ref="cropper" @fClose="fClose">
				</cropper>
			</view>
		</u-popup> 
	</view>
</template>

<script>
	import {
		getUserInfo,
		profileUserInfo
	} from '@/api/user'
	import TimeCollect from '@/utils/time.js'
	import cropper from "@/components/lxiaoxiao-cropper/lxiaoxiao-cropper.vue";
	import $baseUrl from "@/config/index.js"
	export default {
		components: {
			cropper
		},
		data() {
			return {
				sexShow: false,
				columns: [
					['女', '男', ]
				],
				info: {
					nickname: '',
					avatar: '',
					gender: '',
					birthday: ''
				},
				birthdayShow: false,
				birthday: '',
				avatar: '',
				show: false,
				imgurl: ''
			};
		},
		 
		onShow() {
			this.getInfo()
		},
		methods: {
			//上传返回图片
			myUpload(rsp) {
				const self = this;
				self.imgurl = rsp.path; //更新头像方式一
				uni.uploadFile({
					url: $baseUrl.baseUrl + 'api/common/upload',
					filePath: rsp.tempFilePath,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token'),
					},
					success: function(res) {

						if (res.statusCode == 200) {
							uni.showToast({
								title: '上传成功',
								icon: 'none'
							}); 
							self.info.avatar  = JSON.parse(res.data).data.fullurl
							self.show=false
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
						}
					}
				})
			},
			fClose() {
				uni.navigateBack()
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			maskPhoneNumber(phoneNumber) {
				if (phoneNumber && phoneNumber.length === 11) { // 确保手机号是11位
					return phoneNumber.slice(0, 3) + '****' + phoneNumber.slice(7);
				}
				return phoneNumber; // 如果不是11位，直接返回原手机号
			},
			getInfo() {
				let token = uni.getStorageSync('token')
				if (token) {
					getUserInfo({
						token
					}).then(res => {
						if (res.code == 1) {
							this.info = res.data
							if (this.avatar) {
								this.info.avatar = this.avatar
							}
						} else if (res.code == 2) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			goCropper() {
				this.show=true
                this.imgurl = this.info.avatar
                this.$nextTick(function() {
                    this.$refs.cropper.fSelect()
                })
			},
			confirm(e) {
				this.info.sex = e.indexs[0]
				this.sexShow = false
			},
			modifyPhone() {
				uni.navigateTo({
					url: '/pageA/mine/personalData/modifyPhone/modifyPhone'
				})
			},
			birthdayconfirm(e) {
				this.info.birthday = TimeCollect.getTime(e.value)
				this.birthdayShow = false
			},
			onsubmit() {
				if (!this.info.nickname) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!this.info.avatar) {
					uni.showToast({
						title: '请输选择头像',
						icon: 'none'
					})
					return;
				}
				if (!this.info.birthday) {
					uni.showToast({
						title: '请选择生日',
						icon: 'none'
					})
					return
				}
				if (!this.info.gender) {
					uni.showToast({
						title: '请输选择性别',
						icon: 'none'
					})
					return;
				}
				let info = {
					nickname: this.info.nickname,
					avatar: this.info.avatar,
					gender: this.info.sex,
					birthday: this.info.birthday
				}
				profileUserInfo(info).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
                        uni.navigateBack()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.list-box {
		height: 100rpx;
	}

	input {
		text-align: right;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		overflow: hidden;
		border-radius: 35rpx;

		image {
			width: 100%;
		}
	}

	.btn-box {
		height: 90rpx;
		margin-top: 120rpx;
		background: #43ABC4;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		line-height: 90rpx;
	}

	.modify {
		width: 76rpx;
		height: 46rpx;
		border-radius: 23rpx;
		text-align: center;
		line-height: 46rpx;
		color: #43ABC4;
		font-size: 22rpx;
		border: 1px solid #43ABC4;
	}
</style>